<!--
* @description 安全疏散设施单元
!-->
<template>
  <div>
    <el-row class="build-fire-protect-unit-wrap" :gutter="20">
      <el-col :span="24">
        <div class="title-card">
          <span class="title-name">{{groupName}}</span>
          <span class="title-points-num" v-show="deductNum > 0" >{{'-'+deductNum}}</span>
          <span class="title-points-desc">{{desc}}</span>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="model-content content-card">
          <el-carousel v-if="safetyEvacuationData.deductDetails && safetyEvacuationData.deductDetails.length > 0" class="fire-escape-wrap" height="244px" arrow="never" :class="{'one-carousel-item': safetyEvacuationData.deductDetails && safetyEvacuationData.deductDetails.length.length == 1}" :autoplay=false>
            <el-carousel-item v-for="item in safetyEvacuationData.deductDetails" :key="item.id">
              <el-row>
                <el-col :span="11">
                  <el-image class="fire-escape-img" @click="$imgPreview" :src="item.picUrl" :data-imgpreview="item.picUrl" fit="cover" alt="安全出口分析图片"></el-image>
                </el-col>
                <el-col :span="12">
                  <p class="fire-escape-name">{{item.name}}</p>
                  <p class="fire-escape-status" :class="statusClassMap(item.fireTType)">{{item.fireTTypeName}}<span class="" v-if="item.deduct > 0">{{'-' + item.deduct}}</span></p>
                  <p class="fire-escape-time">已持续{{item.keepTime}}</p>
                  <el-link type="primary" @click="openVideo(item)">查看监控</el-link>
                </el-col>
                <el-col :span="1"></el-col>
              </el-row>
            </el-carousel-item>
          </el-carousel>
          <div v-else class="no-data">
            <p class="no-data-text">安全出口视频分析未实行</p>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="points-card-items-wrap content-card">
          <div class="points-card-item" v-for="(item, index) in cardList" :key="index">
            <el-row type="flex" justify="space-between">
              <el-col :span="6">
                <img class="sys-icon" :src="item.icon">
              </el-col>
              <el-col :span="18">
                <p class="sys-name">
                  <span>{{item.name}}</span>
                  <span class="points-num" v-if="item.deduct > 0">{{'-' + item.deduct}}</span>
                  <span v-else class="color-card-point iconfont icon-duigou color-3"></span>
                </p>
                <p class="points-desc">{{item.title}}</p>
                <el-link v-if="item.deduct > 0" :type="item.deduct > 0 ? 'primary' : 'info'" :disabled="item.deduct > 0 ? false : true" @click="openDetail(index)">查看扣分明细</el-link>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :close-on-click-modal="false"
      title="扣分明细"
      width="600px"
      top='25vh'
      :visible.sync="dialogDetail"
      @close="dialogDetail = false">
        <el-table
          :data="tableData"
          height="400"
          style="width: 100%">
          <el-table-column
          prop="desc"
          label="扣分明细">
          </el-table-column>
          <el-table-column
          prop="deduct"
          label="扣分"
          width="100">
          </el-table-column>
        </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getSafetyGroup } from '@/api/home'
import util from '@/utils/util'

export default {
  name: 'FacUnit',
  props: {
    orgId: {
        required: true
    },
    safetyRecordId: {
        required: true
    },
    groupId: {
        required: true
    },
  },
  data () {
    return {
      groupName: '',
      desc: '',
      deductNum: '',
      safetyEvacuationData: {}, // 安全疏散信息
      cardList: [], // 建筑材料隐患信息
      dialogDetail: false,
      tableData: [],
    }
  },
  created() {
    this.getDetailData()
  },
  methods: {
    getDetailData() {
      let that = this
      let parames = {
        orgId: that.orgId,
        groupId: that.groupId,
        safetyRecordsId: that.safetyRecordId
      }
      getSafetyGroup(parames).then(res => {
        if(res.status === 200) {
          let newArr = []
          that.groupName = res.data.groupName || '安全疏散设施单位'
          that.deductNum = res.data.deduct
          that.desc = res.data.title
          
          for(var i=0, len=res.data.details.length; i < len; i++) {
            if(res.data.details[i].objId == 13) {
              that.safetyEvacuationData = res.data.details[i]
            } else {
              newArr.push(res.data.details[i])
            }
          }
          that.cardList = newArr
        }
      })
    },
    statusClassMap(id) {
      const FIRETYPECLASSMAP = {
        '0': 'color-3',
        '10': 'color-1',
        '20': 'color-2',
        '30': 'color-5',
        '40': 'color-8',
      }

      return FIRETYPECLASSMAP[id] || 'color-4'
    },
    openDetail(index) {
      let that = this
      that.tableData = that.cardList[index].deductDetails
      that.dialogDetail = true
    },
    // 查看监控
    openVideo(data) {
      util.rowShowVedio({
        fcFacilitiesId:data.fcfId || '',
        organizationId:data.orgId || this.$store.state.userinfo.org.id,
        serverId:''
      })
    },
    // 更新/刷新模块
    refreshModel() {
      this.getDetailData()
    }
  }
}
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.build-fire-protect-unit-wrap {
  .model-content {
    height: 426px;
    .fire-escape-img {
      height: 238px;
    }
    .fire-escape-name {
      margin-top: 40px;
    }
  }
  .points-card-items-wrap {
    border: none;
    padding: 0 0;
    height: 276px;
    .points-card-item {
      margin: 0;
      width: 100%;
      &:nth-child(2n) {
        margin: 15px 0 0 0;
      }
    }
    .points-card-item:nth-child(3) {
      margin: 15px 0 0 0;
    }
  }
}

</style>
